
<!-- 测试页面 createby hzj -->
<template>
  <div class="menu-container">
    <el-menu
      :collapse="state.isSidebarNavCollapse"
      mode="horizontal"
      text-color="#a4a4a4"
      active-text-color="#fff"
      background-color="#191a23"
      :default-active="state.currentMenu"
      class="theme-bg"
      id="menu"
      :unique-opened="true"
    >
    </el-menu>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({ menuList: [Array] });
const store = useStore();
const router = useRouter();
let navigateToRoute = (name: string) => {
  router.push({
    name,
  });
};
let state = reactive({
  menuList: props.menuList,
  isSidebarNavCollapse: computed(() => store.getters.getIsSidebarNavCollapse),
  currentMenu: computed(() => store.getters.getCurrentMenu),
});
</script>
<style lang='scss' scoped>
/* @import url(); 引入css类 */
.menu-container {
  position: fixed;
  top: 100px;
  bottom: 0;
  width: 200px;
  left: 0;

  .el-menu {
    height: 100%;
    overflow-x: hidden;

    .is-active {
      background-color: #409eff;
    }

    .el-menu-item-group {
      .el-menu-item-group__title {
        padding-top: 0;
      }
    }
  }

  // .el-menu .el-menu-item:hover{
  //   outline: 0 !important;
  //   color: #2E95FB !important;
  //   background: linear-gradient(270deg, #F2F7FC 0%, #FEFEFE 100%)!important;
  // }
}
</style>